<%@taglib prefix="sql" uri="http://java.sun.com/jsp/jstl/sql"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@page contentType="text/html"%>
<%@page pageEncoding="UTF-8"%>
<%@include file="../WEB-INF/jspf/controlesessao.jspf"%>

<jsp:useBean id="data" class="java.util.Date"/>

<fmt:formatDate value="${data}" var="ano_inicio" pattern="yyyy"/>
<fmt:formatDate value="${data}" var="mes_inicio"  pattern="MM"/>

<sql:query var="query" dataSource="jdbc/dbo_MicrosoftSQLServer">
    select a.id_alocacao, a.id_turma,
     a.data_alocacao,
     hora_inicio,
     hora_fim ,
    c.nome_curso, o.desc_componente,
    d.nome as nome
    from Alocacoes a
    inner join Turmas  t on a.id_turma=t.id_turma
    inner join turnos h on t.id_turno=h.id_turno
    inner join Cursos c on c.id_curso=t.id_curso
    inner join Componentes o on o.id_componente=a.id_componente
    inner join Docentes d on d.matricula=a.matricula
    where a.id_turma=?
    and a.id_modulo=?
    and a.id_componente=?
    order by a.data_alocacao
    <sql:param value="${param.id_turma}"/>
    <sql:param value="${param.id_modulo}"/>
    <sql:param value="${param.id_componente}"/>
</sql:query>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
    <head>
        <link rel='stylesheet' type='text/css' href='../css/fullcalendar.css' />
        <link rel="stylesheet" href="../css/ui-lightness/jquery-ui-1.8.2.custom.css">
        <script type='text/javascript' src='../js/jquery.js'></script>
        <script type='text/javascript' src='../js/jquery-ui-1.8.2.custom.min.js'></script>
        <script type='text/javascript' src='../js/fullcalendar.js'></script>
        <script type='text/javascript'>

            $(document).ready(function() {

                var calendar  = $('#calendar');

                calendar.fullCalendar({
                    header: {
                        center: 'title',
                        right: 'prev,next today',
                        left:'month,agendaWeek,agendaDay'
                    },
                    timeFormat:'HH:mm:ss',
                    selectable: true,
                    selectHelper: true,
                    select: function(start, end, allDay) {
                        var d = start.getDate();
                        var m = start.getMonth()+1;
                        var y = start.getFullYear();
                        var id_turma= 'id_turma=' + $("#id_turma").val();
                        var id_componente= 'id_componente=' + $("#id_componente").val();
                        var id_modulo= 'id_modulo=' + $("#id_modulo").val();
                        var data = 'data='+y+'/'+m+'/'+d;
                        var url = 'fm_new_Alocacoes_1.jsp?token=${sessionScope.token}&'+id_turma+'&'+id_componente+'&'+id_modulo+'&'+data;
                        $("#frame").attr("src",url);
                       // $("#evento").dialog("open");
                    },
                    editable: true,
                    events:

                        [
                <c:forEach var="row" items="${query.rows}">


                    <fmt:setLocale value="en-US"/>
                    <fmt:formatDate value="${row.data_alocacao}" var="ano" pattern="yyyy"/>
                    <fmt:formatDate value="${row.data_alocacao}" var="mes"  pattern="MMM" timeZone="America/Los_Angeles"/>
                    <fmt:formatDate value="${row.data_alocacao}" var="dia" pattern="dd"/>
                                    {id: ${row.id_alocacao},
                                        title:'${row.desc_componente} - ${row.nome}',
                                        start:new Date('${mes} ${dia}, ${ano} ${row.hora_inicio}:00'),
                                        end:new Date('${mes} ${dia}, ${ano} ${row.hora_fim}:00'),
                                        url:'fm_update_Alocacoes_1.jsp?token=${sessionScope.token}&chave=${row.id_alocacao}',
                                        allDay:false
                                    },
                </c:forEach>
                                {

                                }
                            ]
                            ,
                            eventDrop: function(event, delta) {
                                $("#evento").html(event.id + ' ' +event.title + ' movido ' + delta + ' dias\n' );
                                // $("#evento").dialog('open');
                            },
                            eventClick: function(event) {
                                $("#frame").attr("src",event.url);
                             //   $("#evento").dialog("open");
                                return false;
                            },
                            loading: function(bool) {
                                if (bool) $('#loading').show();
                                else $('#loading').hide();
                            }
                        });

                    });

        </script>
        <script>
            $(function() {
                $("#cod_turma").change(function(){
                    $("#id_turma").val($(this).val());
                    $("#id_turma").change();
                });
                $("#id_turma").change(function(){
                    $("#cod_turma").val($(this).val());
                });

                $("#evento").dialog({
                    autoOpen:false,
                    resizable: true,
                    height: 540,
                    width:820,
                    modal: true,
                    buttons: {
                        Ok: function() {
                            $(this).dialog('close');
                            $("#id_turma").change();
                        }
                    }
                });
            });

        </script>
        <style type='text/css'>

                                            body {
                                                margin-top: 40px;
                                                text-align: center;
                                                font-size: 14px;
                                                font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
                                            }

                                            #loading {
                                                position: absolute;
                                                top: 5px;
                                                right: 5px;
                                            }
                                            #novo a{
                                                position: absolute;
                                                top: 5px;
                                                right: 330px;
                                                background-color:green;
                                                color:white;
                                            }
                                            #calendar {
                                                width: 800px;
                                                margin: 0 auto;
                                            }

        </style>
    </head>
    <body>
        <form method="post" name="form">
            <p><label class="lbInput">Turma</label>
                <input id="cod_turma" name="cod_turma" value="${param.cod_turma}" size="10">
                <sql:query var="query" dataSource="jdbc/dbo_MicrosoftSQLServer">
                    SELECT  * FROM Turmas t
                    inner join cursos c on t.id_curso=c.id_curso
                    order by id_turma
                </sql:query>
                <select id="id_turma" name="id_turma" class="required" onchange="submit()">
                    <option value="">Todas</option>
                    <c:forEach var="turma" items="${query.rows}">
                        <c:set var="selected" value=""/>
                        <c:if test="${param.id_turma==turma.id_turma}">
                            <c:set var="selected" value="selected"/>
                                <fmt:formatDate value="${turma.inicio_turma}" var="ano_inicio" pattern="yyyy"/>
                                <fmt:formatDate value="${turma.inicio_turma}" var="mes_inicio"  pattern="MM"/>
                        </c:if>
                        <option value="${turma.id_turma}" <c:out value="${selected}"/>>${turma.id_turma}-${turma.nome_curso}</option>
                    </c:forEach>
                </select>
                <script>
                    $(document).ready(function() {

                        var calendar  = $('#calendar');
                        calendar.fullCalendar( 'gotoDate', ${ano_inicio}, ${mes_inicio-1});
                    })
                </script>
            </p>

            <sql:query var="query" dataSource="jdbc/dbo_MicrosoftSQLServer">
                select * from modulos
                inner join turmas on modulos.id_curso=turmas.id_curso
                where id_turma=?
                order by desc_modulo
                <sql:param value="${param.id_turma}"/>
            </sql:query>
            <c:choose>
                <c:when test="${!empty query.rows}">
                    <label class="lbInput">Módulo</label>
                    <select id="id_modulo" name="id_modulo" onchange="submit()">
                        <option value="">Selecione um módulo</option>
                        <c:forEach var="row" items="${query.rows}">
                            <option value="${row.id_modulo}" ${row.id_modulo==param.id_modulo?'selected':''}>${row.desc_modulo}</option>
                        </c:forEach>
                    </select>
                </c:when>
                <c:otherwise>
                    <p style="font-size: 12pt; color: red">Nenhum módulo foi encontrado.</p>
                </c:otherwise>
            </c:choose>
            <sql:query var="query" dataSource="jdbc/dbo_MicrosoftSQLServer">
                select distinct c.id_componente,desc_componente
                from Componentes c
                inner join grades g on g.id_componente=c.id_componente
                where g.id_modulo=?
                order by c.desc_componente
                <sql:param value="${param.id_modulo}"/>
            </sql:query>
            <c:choose>
                <c:when test="${!empty query.rows}">
                    <label class="lbInput">Componente</label>
                    <select id="id_componente" name="id_componente" onchange="submit()">
                        <option value="">Selecione um componente</option>
                        <c:forEach var="row" items="${query.rows}">
                            <option value="${row.id_componente}" ${row.id_componente==param.id_componente?'selected':''}>${row.desc_componente}</option>
                        </c:forEach>
                    </select>
                </c:when>
                <c:otherwise>
                    <p style="font-size: 12pt; color: red">Nenhum componente foi encontrado para o curso/módulo.</p>
                </c:otherwise>

            </c:choose>
        <input type="hidden" id="token" name="token" value="${sessionScope.token}" /> </form>
        <div id='loading' style='display:none'>loading...</div>
        <div id='calendar'></div>
        <div id="evento" title="Alocação" style="display:none">
            <iframe id="frame" src="" width="720px" height="520px" frameborder="0" marginheight="0" marginwidth="0" scrolling="no">

            </iframe>
        </div>
    </body>
</html>
